<template>
	<view class="head">
		<view class="img" @click="back">
			<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/zhengyulan/back-arrow.png" mode=""></image>
		</view>
		<view class="message">
			<text>任务详情</text>
		</view>
	</view>

	<view class="body">
		<view class="container">
			<view class="conaten">
				<view class="heads">
					任务名称：任务名称标题文字
				</view>
				<view class="jiantou">
					<image src="/static/right.png" mode="">
					</image>
				</view>
				<view class="desah"></view>
				<view class="lcircle"></view>
				<view class="rcircle"></view>
				<view class="one">任务内容:<text>内容</text></view>
				<view class="two">任务名称:<text>任务名称</text> </view>
		<!-- 		<view class="three">任务内容：<text>检查该企业整改内容是否合格</text> </view> -->
				<view class="four">任务时间:<text>2025-05-01 至 2025-05-04</text> </view>
				<view class="five">落实照片:</view>
				<view class="picytue">
					<view class="hjuy" @click="previewImage">
						<image src="https://img2.baidu.com/it/u=1451072963,3355621335&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" mode=""></image>
					</view>
					<view class="hjuy" @click="previewImage">
						<image src="https://img2.baidu.com/it/u=1451072963,3355621335&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" mode=""></image>
					</view>
					<view class="hjuy" @click="previewImage">
						<image src="https://img2.baidu.com/it/u=1451072963,3355621335&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" mode=""></image>
					</view>
				</view>
			</view>

		</view>
	</view>




</template>

<script setup>
	const imageUrl = "https://img2.baidu.com/it/u=1451072963,3355621335&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
	// 图片预览函数
	const previewImage = () => {
	  uni.previewImage({
	    urls: [imageUrl], // 使用定义好的图片URL
	    current: 0, // 当前显示图片的索引
	    longPressActions: {
	      itemList: ['发送给朋友', '保存图片', '收藏'],
	      success: function(data) {
	        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
	      },
	      fail: function(err) {
	        console.log(err.errMsg);
	      }
	    }
	  })
	}

function back (){
	uni.navigateBack({
		delta: 1
	})
}

</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 142rpx;
		background: #0874FA;
		position: relative;
		overflow: hidden;
	}

	.img {
		width: 22rpx;
		height: 38rpx;
		position: absolute;
		top: 75rpx;
		left: 40rpx;

		image {
			width: 22rpx;
			height: 38rpx;
		}
	}

	.message {
		width: 220rpx;
		height: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		top: 75rpx;
		left: 270rpx;

		text {
			display: inline-block;
			width: 220rpx;
			height: 34rpx;
			text-align: center;
			line-height: 34rpx;
		}
	}

	.body {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #f3f5f7;

		.container {
			width: 690rpx;
			height: 1010rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			margin: 36rpx auto;

			.conaten {
				width: 690rpx;
				height: 1010rpx;
				position: relative;

				.heads {
					// width: 192rpx;
					height: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 31rpx;
					color: #333333;
					line-height: 28rpx;
					position: absolute;
					top: 34rpx;
					left: 26rpx;
				}
			}

			.jiantou {
				width: 14rpx;
				height: 30rpx;
				// background-color: #CCCCCC;
				position: absolute;
				top: 38rpx;
				right: 20rpx;

				image {
					width: 14rpx;
					height: 30rpx;

				}
			}
		}

		.desah {
			width: 628rpx;
			border: 1px Dashed #E5E5E5;
			position: absolute;
			top: 94rpx;
			left: 31rpx;
		}

		.lcircle {
			width: 25rpx;
			height: 25rpx;
			background: #F3F5F7;
			border-radius: 50%;
			position: absolute;
			top: 81rpx;
			left: -12rpx;
		}

		.rcircle {
			width: 25rpx;
			height: 25rpx;
			background: #F3F5F7;
			border-radius: 50%;
			position: absolute;
			top: 81rpx;
			right: -12rpx;
		}

		.one {
			width: 200rpx;
			height: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			position: absolute;
			top: 129rpx;
			left: 26rpx;
			text{
				color: #333333;
				margin-left: 20rpx;
			}
		}

		.two {
			width: 263rpx;
			height: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			position: absolute;
			top: 189rpx;
			left: 26rpx;
			text{
				color: #333333;
				margin-left: 20rpx;
			}
		}

		.three {
			width: 540rpx;
			height: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			position: absolute;
			top: 251rpx;
			left: 26rpx;
			text{
				color: #333333;
					margin-left: 20rpx;
			}
		}

		.four {
			width: 540rpx;
			height: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			position: absolute;
			top: 250rpx;
			left: 26rpx;
			text{
				color: #333333;
				margin-left: 20rpx;
			}
		}

		.five {
			width: 180rpx;
			height: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 33rpx;
			position: absolute;
			top: 318rpx;
			left: 26rpx;
		}
		.picytue{
			width: 628rpx;
			height: 200rpx;
			// background-color: #0874FA;
			position: absolute;
			top: 400rpx;
			left: 29rpx;
			display: flex;
			justify-content: space-between;
			.hjuy{
				width: 188rpx;
				height: 220rpx;
				image{
					width: 188rpx;
					height: 220rpx;
				}
			}
		}
	}
</style>